<template>
  <div>
    <div class="top-title" style="transform: translateY(-20px)">基本信息</div>
      <el-form ref="formName" :model="form" :rules="rules" :label-suffix="':'">
        <el-row :gutter="40">
          <el-col class="left" :span="8">
            <div>
              <el-form-item label="姓名" class="input-width" prop="name">
                <el-input v-model="form.name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="性别" class="input-width" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="年龄" class="input-width" prop="age">
                <el-input v-model="form.age" autocomplete="off" onkeyup="value=value.replace(/[^\d]/g,'')"/>
              </el-form-item>
              <el-form-item label="血型" class="input-width" prop="bloodType">
                <el-input v-model="form.bloodType" autocomplete="off" />
              </el-form-item>
              <el-form-item label="工龄" class="input-width" prop="workingYears">
                <el-input v-model="form.workingYears" autocomplete="off" onkeyup="value=value.replace(/[^\d]/g,'')"/>
              </el-form-item>
              <el-form-item label="出生年月" class="input-width" prop="dateOfBirth"><br/>
                <el-date-picker
                  v-model="form.dateOfBirth"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col class="center" :span="8">
            <div>
              <el-form-item label="学历" class="input-width" prop="education">
                <el-input  v-model="form.education" autocomplete="off" />
              </el-form-item>
              <el-form-item label="所属劳务公司" class="input-width" prop="labourServicesId"><br/>
<!--                <el-input v-model="form.uid" autocomplete="off" />-->
                <el-select v-model="form.labourServicesId" placeholder="请选择">
                  <el-option v-for="(item, index) of corporateNameList" :key="index" :label="item.corporateName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电话号码" class="input-width" prop="telephone">
                <el-input v-model="form.telephone" minlength="11" maxlength="13" autocomplete="off" onkeyup="value=value.replace(/[^\d]/g,'')" />
              </el-form-item>
              <el-form-item label="身份证号码" class="input-width" prop="identityCard">
                <el-input v-model="form.identityCard" minlength="15" maxlength="18" autocomplete="off" onkeyup="value=value.replace(/[^\d]/g,'')"/>
              </el-form-item>
              <el-form-item label="紧急联系人电话" class="input-width" prop="emergencyContactTelephone">
                <el-input v-model="form.emergencyContactTelephone" minlength="11" maxlength="13"  autocomplete="off" onkeyup="value=value.replace(/[^\d]/g,'')" />
              </el-form-item>
            </div>
          </el-col>
          <el-col class="right" :span="8">
            <div>
              <el-form-item label="工种" class="input-width" prop="typeOfWork">
                <el-input v-model="form.typeOfWork" autocomplete="off" />
              </el-form-item>
              <el-form-item label="家庭地址" class="input-width" prop="homeAddress">
                <el-input v-model="form.homeAddress" autocomplete="off" />
              </el-form-item>
              <el-form-item label="工资情况" class="input-width" prop="wages">
                <div>
                  <el-radio-group v-model="form.wages">
                    <el-radio :label="1">月薪</el-radio>
                    <el-radio :label="2">日薪</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <div>
                <el-form-item v-show="form.wages == 1" class="input-width">
                  <el-input v-model="form.monthlyBasicSalary" placeholder="基本月薪" autocomplete="off" onkeyup="value=value.replace(/[^\d^\.]/g,'')"/>
                  <el-input v-model="form.attendanceWage" placeholder="考勤工资(时薪/h)" style="margin-top: 8px" autocomplete="off" onkeyup="value=value.replace(/[^\d^\.]/g,'')"/>
                </el-form-item>
                <el-form-item v-show="form.wages == 2" class="input-width">
                  <el-input v-model="form.dailyWageSalary" placeholder="每小时工资" autocomplete="off" onkeyup="value=value.replace(/[^\d^\.]/g,'')"/>
                </el-form-item>
              </div>
              <el-form-item label="有无病史" class="input-width" prop="medicalState">
                <div>
                  <el-radio-group v-model="form.medicalState">
                    <el-radio :label="2">无</el-radio>
                    <el-radio :label="1">有</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              <div>
                <el-form-item v-show="form.medicalState == 1" class="input-width">
                  <el-input v-model="form.medicalValue" placeholder="病史概述" autocomplete="off" />
                </el-form-item>
              </div>
              <el-form-item label="社保" prop="socialSecurity">
                <el-radio-group @change="change" v-model="form.socialSecurity">
                  <el-radio :label="1">参保</el-radio>
                  <el-radio :label="2">未参保</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="保险" prop="lnsurance">
                <el-radio-group v-model="form.lnsurance">
                  <el-radio :label="1">投保</el-radio>
                  <el-radio :label="2">未投保</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div>
<!--              <div class="top-title" style="margin-bottom: 39px">上传证书</div>-->
              <div style="width: 640px">
<!--                <single-image-upload />-->
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;margin-top: 30px">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('formName')">确 定</el-button>
      </div>
  </div>
</template>

<script>

export default {
  name: 'AddEditAlert',
  props: {
    alertType: {
      type: String,
      default: ''
    },
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // name:姓名,sex:性别性别（1 男、2女），bloodType:血型,
      // workingYears:工龄,dateOfBirth:出生年月日,education:学历,
      // identityCard:身份证,)telephone:电话号码,emergencyContactTelephone:紧急联系人电话号码,
      // typeOfWork:工种,
      // homeAddress:家庭住址,wages:工资情况（1 月薪、2日薪）,socialSecurity:社保（1 参保、2未参保）,
      // lnsurance:保险（1表示投保 2未投保）,image:证书’,age:年龄,
      // monthlyBasicSalary:月薪基本工资月薪基本工资,attendanceWage:考勤工资,:日薪工资(小时),
      // uid:所属劳务公司ID
      form: {
        name: '',
        sex: '',
        age: '',
        bloodType: '',
        workingYears: '', // 工龄
        dateOfBirth: '',
        education: '',
        identityCard: '',
        telephone: '',
        emergencyContactTelephone: '',
        typeOfWork: '',
        homeAddress: '',
        wages: 1, // 工资情况（1 月薪、2日薪）
        medicalState:2,//病史状态（1 有 2无）
        medicalValue:'',//什么病
        socialSecurity: 1, // 社保（1 参保、2未参保）
        lnsurance: 1, // 保险（1表示投保 2未投保）
        monthlyBasicSalary: '', // 月薪基本工资
        attendanceWage: '', // 考勤工资
        dailyWageSalary: '', // 日薪工资
        labourServicesId: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { min: 1, max: 3, message: '长度不符', trigger: 'blur' }
        ],
        bloodType: [
          {  required: true, message: '请输入血型', trigger: 'blur' }
        ],
        dateOfBirth: [
          {  required: true, message: '请输入血型', trigger: 'change' }
        ],
        workingYears: [
          { required: true, message: '请输入工龄', trigger: 'blur' },
          { min: 1, max: 3, message: '长度不符', trigger: 'blur' }
        ],
        labourServicesId: [
          { required: true, message: '请选择劳务公司', trigger: 'change' }
        ],
        education: [
          { required: true, message: '请输入学历', trigger: 'blur' }
        ],
        identityCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 15, max: 18, message: '请输入15-18位数字', trigger: 'change' }
        ],
        telephone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 13, message: '长度不符, 请输入11-13位数字', trigger: 'change' }
        ],
        emergencyContactTelephone: [
          { required: true, message: '请输入紧急联系人电话', trigger: 'blur' },
          { min: 11, max: 13, message: '长度不符, 请输入11-13位数字', trigger: 'change' }
        ],
        typeOfWork: [
          { required: true, message: '请输入工种', trigger: 'blur' }
        ],
        homeAddress: [
          { required: true, message: '请输入家庭住址', trigger: 'blur' }
        ],
        wages: [
          { required: true, message: '请输入工资情况', trigger: 'blur' }
        ],
        socialSecurity: [
          { required: true, message: '请选择社保', trigger: 'blur' }
        ],
        lnsurance: [
          { required: true, message: '请选择保险', trigger: 'blur' }
        ],
        medicalState:[
          { required: true, message: '请选择有无病史', trigger: 'blur' }
        ]
      },
      corporateNameList: []
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.clearContent()
          this.$emit('submit', this.form)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    clearContent() {
    },
    change() {
    }
  }
}
</script>

<style lang="scss" scoped>
.input-width{
  ::v-deep .el-input__inner{
    max-width: 280px;
  }
}
</style>
